<!-- 导航条 -->
<template>
  <div id="header">
    <el-row>
      <el-col :span="6"
              class="header-left">
        <img src="../assets/images/logo.jpg"
             alt="">
        <!-- <el-dropdown placement="bottom-start">
          <span>
            广州<i class="el-icon-arrow-down el-icon--right" />
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
      </el-col>
      <el-col :span="18"
              class="header-right">
        <ul>
          <li :class="{'actived':show.home}"
              @click="toggle('home')">
            首页
          </li>
          <li :class="{'actived':show.buy}"
              @click="toggle('buy')">
            买车
          </li>
          <li :class="{'actived':show.sales}"
              @click="toggle('sales')">
            卖车
          </li>
          <li :class="{'actived':show.carAssess}"
              @click="toggle('carAssess')">
            车辆评估
          </li>
          <li
            @click="showCollection=true">
            收藏
          </li>
          <li :class="{'actived':show.information}"
              @click="toggle('information')">
            我的
          </li>
          <template v-if="!isLogined">
            <li :class="{'actived':show.login}"
                @click="toggle('login')">
              登陆
            </li>
            <li :class="{'actived':show.register}"
                @click="toggle('register')">
              注册
            </li>
          </template>
          <li v-else
              :class="{'actived':show.logOut}"
              @click="toggle('logOut')">
            注销
          </li>
        </ul>
      </el-col>
    </el-row>
    <Collection v-show="showCollection"
                :show="showCollection"
                @close="closeLayer" />
  </div>
</template>

<script>
  import Collection from '@/components/Collection.vue';
  import { logOut } from '@/api/useroperation';

  export default {
    name: 'Header',
    components: {
      Collection,
    },
    data() {
      return {
        show: {
          home: false,
          buy: false,
          sales: false,
          carAssess: false,
          login: false,
          register: false,
          logout: false,
          information: false,
          logOut: false,
        },
        city: {
          show: true,
          list: [],
        },
        showCollection: false, // 收藏
        isLogined: false,
      };
    },
    watch: {
      '$route.name': function (val, oldVal) {
        this.show[val] = true;
        this.show[oldVal] = false;
      },
    },
    mounted() {
      const userName = sessionStorage.getItem('userName');
      if (userName) {
        this.isLogined = true;
      }
      this.show[this.$route.name] = true;
      this.$on('login', () => {
        this.isLogined = true;
      });
    },
    methods: {
      toggle(type) {
        switch (type) {
        case 'home':
          this.$router.push('/');
          break;
        case 'buy':
          this.$router.push('/buyCar');
          break;
        case 'sales':
          this.$router.push('/salesCar');
          break;
        case 'carAssess':
          this.$router.push('/carAssess');
          break;
        case 'login':
          this.$router.push('/login');
          break;
        case 'register':
          this.$router.push('/register');
          break;
        case 'information':
          this.$router.push('/information');
          break;
        case 'logOut':
          this.logOut();
          break;
        default:
          break;
        }
      },
      logOut() {
        logOut().then(() => {
          // if (data.success) {
          this.isLogined = false;
          sessionStorage.removeItem('userName');
          this.$router.push('/');
        // }
        });
      },
      closeLayer() {
        this.showCollection = false;
      },
    },
  };
</script>
<style lang='scss'>
.el-dropdown-menu {
  li {
    &:hover {
      background: #fff !important;
      color: #ff5400 !important;
    }
  }
}
#header {
  width: 12rem;
  height: 0.6rem;
  margin: 0 auto;
  .header-left {
    img {
      width: 1.45rem;
      height: 0.6rem;
      margin-right: 0.5rem;
    }
    span {
      font-size: 0.15rem;
      cursor: pointer;
    }
  }
  .header-right {
    line-height: 0.6rem;
    font-size: 0.14rem;
    ul {
      width: 5.6rem;
      float: right;
      li {
        cursor: pointer;
        display: inline-block;
        text-align: center;
        margin: 0 0.15rem;
        .el-dropdown {
          color: #000;
          &:hover {
            color: #ff5400;
          }
        }
        &:hover {
          color: #ff5400;
        }
      }
    }
    .actived {
      color: #ff5400;
    }
  }
}
</style>
